<template>
  <div>
    <div class="weekHeader">周末去哪玩</div>
    <div class="weekenPlay">
      <ul>
        <li v-for="item of list" :key="item.id">
          <div class="weekImg">
            <img :src="item.weekImgUrl"></div>
          <h6>{{item.weekTitle}}</h6>
          <p v-text="item.weekInfo"></p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name : 'HomeWeekend',
  props: {
    list: Array
  },
  // data () {
  //   return {
  //     weekList : [
  //       {
  //         weekImgUrl : 'http://img1.qunarzz.com/sight/source/1509/53/ce35546289f8ca.jpg_r_640x214_d1dc051d.jpg',
  //         weekTitle : '茂名必游TOP 5',
  //         weekInfo : '这里水产养殖享誉盛名，好吃好玩好开心'
  //       },
  //       {
  //         weekImgUrl : 'http://img1.qunarzz.com/sight/source/1509/c0/f4012cee4597dc.jpg_r_640x214_3db03479.jpg',
  //         weekTitle : '清远赏秋地儿',
  //         weekInfo : '浪漫秋季，来看看清远哪儿适合秋游'
  //       },
  //       {
  //         weekImgUrl : 'http://img1.qunarzz.com/sight/source/1511/f7/90c1c5f6f3dd59.jpg_r_640x214_3cb4974e.jpg',
  //         weekTitle : '河源必游TOP 10',
  //         weekInfo : '走进客家古邑，感受万绿河源'
  //       },
  //       {
  //         weekImgUrl : 'http://img1.qunarzz.com/sight/source/1505/4a/ac007012d54bd4.jpg_r_640x214_eefa6ade.jpg',
  //         weekTitle : '惠州必游TOP 5',
  //         weekInfo : '人美帅哥多，人杰地灵，欢迎八方好友,好多好多描述到省略号都出现了'
  //       },
  //     ]
  //   }
  // }
}
</script>
<style scoped>
 .weekHeader {
   width: 100%;
   height: 40px;
   margin-top: 5px;
   background-color: rgba(0,0,0,.2);
   line-height: 40px;
   margin-bottom: 4px;
   overflow: hidden;
 }
  .weekenPlay {
    width: 100%;
    overflow: hidden;
  }
  .weekenPlay ul li {
    list-style: none;
    width: 100%;
    box-shadow: 1px 1px 4px rgba(0,0,0,.4);
    margin-bottom: 10px;
  }
  .weekenPlay ul li .weekImg img {
    width: 100%;
    height: 120px;
  }
 .weekenPlay ul li h6 {
   font-weight: bold;
   margin-left: 5px;

 }
  .weekenPlay ul li p {
    color: #7e8c8d;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
